<template>
  <div class="collapseButton-container" :class="{ collapsed: sidebarCollapsed }">
    <button class="collapseButton" @click="() => (sidebarCollapsed = !sidebarCollapsed)">
      <img src="/src/assets/images/geo/arrow_left_2x.png" alt="" />
    </button>
  </div>
</template>

<script setup>
defineComponent({
  name: 'CollapseButton'
})
const sidebarCollapsed = defineModel()
</script>i

<style lang="scss" scoped>
.collapseButton-container {
  position: absolute;
  display: block;
  z-index: -1;
  top: 50%;
  left: 100%;
  transform: translate(-8px, -50%);
  &.collapsed {
    .collapseButton {
      transform: scaleX(-1);
      border-radius: 8px 0 0 8px;
    }
  }
  .collapseButton {
    background: #fff;
    border: 0;
    box-shadow:
      0 1px 2px rgb(60 64 67 / 30%),
      0 2px 6px 2px rgb(60 64 67 / 15%);
    width: 23px;
    height: 48px;
    cursor: pointer;
    border-left: 1px solid #dadce0;
    border-radius: 0 8px 8px 0;
    background: #fff 7px center/7px 10px no-repeat;
    img {
      width: 24px;
    }
  }
}
</style>
